<template>
	<view>
		<view class=" uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-if="current === 0" style="width: 100%;height: 60px;">
				<view class="uni-row" style="margin: 0 10px;">
					<input class="uni-input" focus placeholder="申请人名称,单号搜索"  v-model="order0Text"
						@confirm="approveOrder()" />
				</view>

				<view style="padding-bottom: 200px;" v-if="orderState0">

					<view style="margin: 10px;	border: 1px solid #f7f1f1;" v-for="item in orderState0"
						@click="orderDetails(item.orderId,1)">

						<view class="uni-flex uni-row" style="border-bottom: 1px solid #f7f1f1;">
							<view class="flex-left">
								<text> 申领单号: {{item.orderId.substring(0,8).toUpperCase()}}</text>
							</view>
							<view class="flex-right ">
								<button class="button-yellow">待审批</button>
							</view>
						</view>
						<view class="uni-flex uni-row">
							<view class="flex-list-item ">
								<text> 申请公司: {{item.company}}</text>
							</view>
						</view>
						<view class="uni-flex uni-row">
							<view class="flex-list-item ">
								<text> 申请部门: {{item.department}}</text>
							</view>
						</view>
						<view class="uni-flex uni-row">
							<view class="flex-list-item ">
								<text> 申请事由: {{item.rason}}</text>
							</view>
						</view>
						<view class="uni-flex uni-row" style="border-top: 1px solid #f7f1f1;">
							<view class="flex-left" style="width: 40%;">
								<text> 申请人: {{item.userName}}</text>
							</view>
							<view class="flex-right"
								style="width: 60%;	height: 50px;margin-left: 10px;display: flex;align-items: center;text-align: center;">
								<text> 时间: {{new Date(item.time).format("YYYY-MM-DD HH:mm")}}</text>
							</view>
						</view>

					</view>

				</view>
			</view>
			<view v-if="current === 1" style="width: 100%;height: 60px;">
				<view class="uni-row"  style="margin: 0 10px;">
					<input class="uni-input" focus placeholder="申领单号搜索" v-model="order1Text"
						@confirm="orderState1Request()" />
				</view>

				<view style="padding-bottom: 200px;">

					<view style="margin: 10px;	border: 1px solid #f7f1f1;" v-for="item in orderState1"
						@click="orderDetails(item.orderId,2)">

						<view class="uni-flex uni-row" style="border-bottom: 1px solid #f7f1f1;">
							<view class="flex-left">
								<text> 申领单号: {{item.orderId.substring(0,8).toUpperCase()}}</text>
							</view>
							<view class="flex-right ">
								<button class="button-yellow">审批中</button>
							</view>
						</view>
						<view class="uni-flex uni-row">
							<view class="flex-list-item ">
								<text> 申请公司: {{item.company}}</text>
							</view>
						</view>
						<view class="uni-flex uni-row">
							<view class="flex-list-item ">
								<text> 申请部门: {{item.department}}</text>
							</view>
						</view>
						<view class="uni-flex uni-row">
							<view class="flex-list-item ">
								<text> 申请事由: {{item.rason}}</text>
							</view>
						</view>
						<view class="uni-flex uni-row" style="border-top: 1px solid #f7f1f1;">
							<view class="flex-left" style="width: 40%;">
								<text> 申请人: {{item.userName}}</text>
							</view>
							<view class="flex-right"
								style="width: 60%;	height: 50px;margin-left: 10px;display: flex;align-items: center;text-align: center;">
								<text> 时间: {{new Date(item.time).format("YYYY-MM-DD HH:mm")}}</text>
							</view>
						</view>

					</view>

				</view>
			</view>
			<view v-if="current === 2" style="width: 100%;height: 60px;">
				<view class="uni-row"  style="margin: 0 10px;">
					<input class="uni-input" focus placeholder="申领单号搜索" v-model="order2Text"
						@confirm="orderState2Request()" />
				</view>

				<view style="padding-bottom: 200px;">

					<view style="margin: 10px;	border: 1px solid #f7f1f1;" v-for="item in orderState2"
						@click="orderDetails(item.orderId,3)">

						<view class="uni-flex uni-row" style="border-bottom: 1px solid #f7f1f1;">
							<view class="flex-left">
								<text> 申领单号: {{item.orderId.substring(0,8).toUpperCase()}}</text>
							</view>
							<view class="flex-right ">
								<button class="button-blue">审批完成</button>
							</view>
						</view>
						<view class="uni-flex uni-row">
							<view class="flex-list-item ">
								<text> 申请公司: {{item.company}}</text>
							</view>
						</view>
						<view class="uni-flex uni-row">
							<view class="flex-list-item ">
								<text> 申请部门: {{item.department}}</text>
							</view>
						</view>
						<view class="uni-flex uni-row">
							<view class="flex-list-item ">
								<text> 申请事由: {{item.rason}}</text>
							</view>
						</view>
						<view class="uni-flex uni-row" style="border-top: 1px solid #f7f1f1;">
							<view class="flex-left" style="width: 40%;">
								<text> 申请人: {{item.userName}}</text>
							</view>
							<view class="flex-right"
								style="width: 60%;	height: 50px;margin-left: 10px;display: flex;align-items: center;text-align: center;">
								<text> 时间: {{new Date(item.time).format("YYYY-MM-DD HH:mm")}}</text>
							</view>
						</view>

					</view>

				</view>
			</view>
			<view v-if="current === 3" style="width: 100%;height: 60px;">
				<view class="uni-row"  style="margin: 0 10px;">
					<input class="uni-input" focus placeholder="申领单号搜索" v-model="order3Text"
						@confirm="orderState3Request()" />
				</view>

				<view style="padding-bottom: 200px;">

					<view style="margin: 10px;	border: 1px solid #f7f1f1;" v-for="item in orderState3"
						@click="orderDetails(item.orderId,4)">

						<view class="uni-flex uni-row" style="border-bottom: 1px solid #f7f1f1;">
							<view class="flex-left">
								<text> 申领单号: {{item.orderId.substring(0,8).toUpperCase()}}</text>
							</view>
							<view class="flex-right ">
								<button class="button-yellow">取货完成</button>
							</view>
						</view>
						<view class="uni-flex uni-row">
							<view class="flex-list-item ">
								<text> 申请公司: {{item.company}}</text>
							</view>
						</view>
						<view class="uni-flex uni-row">
							<view class="flex-list-item ">
								<text> 申请部门: {{item.department}}</text>
							</view>
						</view>
						<view class="uni-flex uni-row">
							<view class="flex-list-item ">
								<text> 申请事由: {{item.rason}}</text>
							</view>
						</view>
						<view class="uni-flex uni-row" style="border-top: 1px solid #f7f1f1;">
							<view class="flex-left" style="width: 40%;">
								<text> 申请人: {{item.userName}}</text>
							</view>
							<view class="flex-right"
								style="width: 60%;	height: 50px;margin-left: 10px;display: flex;align-items: center;text-align: center;">
								<text> 时间: {{new Date(item.time).format("YYYY-MM-DD HH:mm")}}</text>
							</view>
						</view>

					</view>

				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		formatNumber,
		formatDateThis,
		getUnixTime
	} from "@/common/dateUtil.js"
	var that;
	export default {
		components: {},
		data() {
			return {
				orderState0: [],
				items: ['待审批', '审批中', '审批完成', '取货完成'],
				colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'button',
				userEntity: this.StorageCache('user'),
				title: "app端导出excel",
				successTip: "",
				order0Text: "",
				order1Text: "",
				order2Text: "",
				order3Text: "",
			}
		},
		onLoad() {

			this.Init()
		},
		methods: {
			Init() {
				this.checkLogin()


				this.approveOrder()

				this.orderState1Request()

				this.orderState2Request()

				this.orderState3Request()




			},
			approveOrder() {
				this.orderState0 = []

				uni.request({
					url: this.url+'ApproveOrder',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					dataType: 'json',
					data: {
						userId: this.userEntity.sid,
						orderId: this.order0Text

					},
					success: (res) => {

						if (res.statusCode == 200) {

							for (let i = 0; i < res.data.length; i++) {
								this.orderState0.push(res.data[i])
							}
						}
					},
					complete: (res) => {

					}
				});


			},
			orderState1Request() {

				this.orderState1 = []

				uni.request({
					url: this.url+'AppOrder',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					dataType: 'json',
					data: {
						userId: this.userEntity.sid,
						state: 1,
						orderId: this.order1Text
					},
					success: (res) => {

						if (res.statusCode == 200) {

							for (let i = 0; i < res.data.length; i++) {
								this.orderState1.push(res.data[i])
							}
						}
					},
					complete: (res) => {

					}
				});

				this.$forceUpdate();
			},
			orderState2Request() {

				this.orderState2 = []

				uni.request({
					url: this.url+'AppOrder',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					dataType: 'json',
					data: {
						userId: this.userEntity.sid,
						state: 2,
						orderId: this.order2Text
					},
					success: (res) => {

						if (res.statusCode == 200) {

							for (let i = 0; i < res.data.length; i++) {
								this.orderState2.push(res.data[i])
							}
						}
					},
					complete: (res) => {

					}
				});

				this.$forceUpdate();

			},
			orderState3Request() {



				this.orderState3 = []

				uni.request({
					url: this.url+'AppOrder',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					dataType: 'json',
					data: {
						userId: this.userEntity.sid,
						state: 3,
						orderId: this.order3Text
					},
					success: (res) => {

						if (res.statusCode == 200) {

							for (let i = 0; i < res.data.length; i++) {
								this.orderState3.push(res.data[i])
							}
						}
					},
					complete: (res) => {

					}
				});

				this.$forceUpdate();
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			styleChange(e) {
				if (this.styleType !== e.detail.value) {
					this.styleType = e.detail.value
				}
			},
			colorChange(e) {
				if (this.styleType !== e.detail.value) {

					this.activeColor = e.detail.value
				}
			},
			orderDetails(sid, state) {
				setTimeout(function() {
					uni.navigateTo({
						url: '/pages/cupboard/orderDetails?id=' + sid + '&state=' + state
					})
				}, 1000);

			},
			tableToExcel() {
				//要导出的json数据
				const jsonData = [{
					name: '测试数据',
					phone: '123456',
					email: '123@456.com'
				}]
				//列标题
				let worksheet = "sheet1";
				let str = '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>';
				//循环遍历，每行加入tr标签，每个单元格加td标签
				for (let i = 0; i < jsonData.length; i++) {
					str += '<tr>';
					for (let item in jsonData[i]) {
						//增加\t为了不让表格显示科学计数法或者其他格式
						str += `<td>${ jsonData[i][item] + '\t'}</td>`;
					}
					str += '</tr>';
				}
				//下载的表格模板数据
				let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
			xmlns:x="urn:schemas-microsoft-com:office:excel"
			xmlns="http://www.w3.org/TR/REC-html40">
			<head><!--[if gte mso 9]><xml encoding="UTF-8"><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
			<x:Name>${worksheet}</x:Name>
			<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
			</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
			</head><body><table>${str}</table></body></html>`;
				//下载模板
				exportFile(template);
			}
		},
		onNavigationBarButtonTap: function(e) {




			this.tableToExcel()
		},
	}

	// 导出文件到手机 fileData:要写入到文件的数据，返回参数为文档路径
	function exportFile(fileData, documentName = "项目Excel文件") {
		/*
		PRIVATE_DOC: 应用私有文档目录常量
		PUBLIC_DOCUMENTS: 程序公用文档目录常量
		*/
		plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fs) {

			let rootObj = fs.root;
			let fullPath = rootObj.fullPath;

			// 创建文件夹
			rootObj.getDirectory(documentName, {
				create: true
			}, function(dirEntry) {
				//获取当前的年月继续创建文件夹
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				dirEntry.getDirectory(`${year}年${month}月`, {
					create: true
				}, function(dirEntry2) {
					// 创建文件,防止重名
					let fileName = "excel" + getUnixTime(formatDateThis(new Date()));

					dirEntry2.getFile(`${fileName}.xlsx`, {
						create: true
					}, function(fileEntry) {
						fileEntry.createWriter(function(writer) {
							writer.onwritestart = (e) => {
								uni.showLoading({
									title: "正在导出",
									mask: true
								})
							}

							//  /storage/emulated/0指的就是系统路径
							let pathStr = fullPath.replace("/storage/emulated/0",
								"");
							writer.onwrite = (e) => {
								// 成功导出数据;
								uni.hideLoading();
								setTimeout(() => {
									uni.showToast({
										title: "成功导出",
										icon: "success"
									})
									that.successTip =
										`文件位置：${pathStr}/${documentName}/${year}年${month}月`;
								}, 500)

							};
							// 写入内容;
							writer.write(fileData);

						}, function(e) {
						
						});
					});
				})

			});

		});

	}
</script>

<style>
	.uni-common-mt {
		margin-top: 10px;
	}

	.content {

		display: flex;

		justify-content: center;
		align-items: center;
		height: 80px;
		text-align: center;
	}

	.content-text {
		font-size: 18px;
		color: #333;
	}


	.uni-input {
		height: 42px;
		line-height: 42px;
		font-size: 15px;
		padding: 0px;
		flex: 1;
		background-color: #FFFFFF;
	}


	.flex-left {
		width: 60%;
		height: 50px;
		margin-left: 10px;
		display: flex;
		align-items: center;
		text-align: center;
	}

	.flex-right {
		width: 40%;
		text-align: center;

	}




	.flex-item {
		margin: 10px;
		width: 33.3%;
		text-align: center;
		line-height: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

	}

	.flex-list-item {
		margin: 10px;
		width: 100%;
		text-align: start;
		line-height: 15rpx;
		display: flex;
		flex-direction: row;

		color: #7f7c7c;

	}

	.uni-row {

		background-color: #FFFFFF;
	}

	.button-yellow {
		background-color: #FFFFFF;
		border: 1px solid #F0AD4E;
		color: #F0AD4E;
		margin: 5px;
		padding: 0px;
		font-size: 10px;
	}
	.button-blue {
		background-color: #FFFFFF;
		border: 1px solid rgb(0, 122, 255);
		color: rgb(0, 122, 255);
		margin: 5px;
		padding: 0px;
		font-size: 10px;
	}
</style>
